import React, { Component } from 'react'
import { Icon } from 'antd';
import Maindiv from './components/mainDiv'
import './jingxuan.scss'
import $ from 'jquery'
export default class jingxuan extends Component {
  constructor(){
    super()
    this.state={
      mainlist:[{
        'id':0,
        'src':'https://d.vpimg1.com/upcb/2020/01/09/124/ias_157856363611325_570x273_90.jpg',
        'title':'诗篇PSALTER女装专场',
        'red_txt':0.3,
        'text':'折起 | 部分商品折上1.4折起'
      },
      {
        'id':1,
        'src':'https://c.vpimg1.com/upcb/2020/01/10/112/ias_157864641359283_570x273_90.jpg',
        'title':'斐乐FILA-新春特卖专场',
        'red_txt':1.5,
        'text':'折起 | 部分商品折上2.8折起'
      },
      {
        'id':2,
        'src':'https://d.vpimg1.com/upcb/2020/01/14/135/ias_157896607094125_570x273_90.jpg',
        'title':'思诺芙德SNOWFORTE羊绒保暖专场',
        'red_txt':3,
        'text':'折起 | 部分商品折上3.3折起'
      },
      {
        'id':3,
        'src':'https://d.vpimg1.com/upcb/2020/01/13/8/ias_157891198220050_570x273_90.jpg',
        'title':'MO&Co.新年特卖专场',
        'red_txt':2,
        'text':'折起 | 部分商品折上4.2折起'
      }]
    }
  }
  // componentDidMount(){
  //   this.handleScroll()
  // }
  render() {
    return (
      <div className='main jingxuan' id='jingxuan'>
        <div className='daohang' onMouseEnter={this.handleChangeColor}>
          <a className='current' href='#jingxuan'><Icon type="star" />精选</a>
          <a href='#nvzhuang'><Icon type="experiment" />女装</a>
          <a href='#xiebao'><Icon type="google" />鞋包</a>
          <a href='#nanzhuang'><Icon type="sketch" />男装</a>
          <a href='#sports'><Icon type="car" />运动</a>
        </div>
        <img src='https://a.vpimg3.com/upload/dop/2019/05/23/118/count_topfive.png' alt='' />
        <hr />
        <div className='jx_xq'>
          {this.state.mainlist.map(el=>{
            return <Maindiv key={el.id} mainlist={el}></Maindiv>
          })}
        </div>
      </div>
    )
  }
  handleChangeColor=()=>{
    // console.log($('.daohang a'))
    $('.daohang a').on('mouseenter',function(){
      $(this).addClass('crr').siblings().removeClass('crr')
    }).on('mouseleave',function(){
      $(this).removeClass('crr')
    }).on('click',function(){
      $(this).addClass('current').siblings().removeClass('current')
    })
  }
  // handleScroll=(event)=>{
  //   let scrollTop  = document.documentElement.scrollTop;
  //   console.log(scrollTop)
  // }
}
